{include file="public/header" /}
<style>
    body {
        background-color: var(--themeColor);
    }

    .main {
        padding-top: .88rem;
        padding-bottom: 1.4rem;

        .items {
            background-color: var(--ff);
            border-radius: .16rem;
            position: relative;

            .middle {
                & > img {
                    width: .4rem;
                    height: .4rem;
                }

                & > span {
                    font-weight: 500;
                    font-size: .30rem;
                    color: var(--dcl);
                    margin-left: .13rem;
                }

                margin-bottom: .3rem;
            }

            .desc {
                font-weight: 400;
                font-size: .24rem;
                color: var(--c9);
            }

            .check {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: .3rem;
                width: .38rem;
                height: .38rem;
            }
        }
    }
</style>
<body>
<div class="main">
    <div class="build-navbar" data-title="请选择提现方式" data-left="false"></div>
    <div class="items m-30 p-30" data-val="{if $user.alipay_image && $user.alipay_name}支付宝{/if}" lay-change="mode">
        <div class="middle flex items-start ">
            <img src="/static/index/images/payment/alipay.png" alt="" class="icon">
            <span>支付宝</span>
        </div>
        <div class="desc tran">姓名：{$user.alipay_name?:'未绑定'}</div>
        <img src="/static/index/images/not-check.png" alt="" class="check">
    </div>

    <div class="items m-30 p-30" data-val="{if $user.wechat_name && $user.wechat_image}微信{/if}" lay-change="mode">
        <div class="middle flex items-start ">
            <img src="/static/index/images/payment/wechat.png" alt="" class="icon">
            <span>微信</span>
        </div>
        <div class="desc tran">姓名：{$user.wechat_name?:'未绑定'}</div>
        <img src="/static/index/images/not-check.png" alt="" class="check">
    </div>

    <div class="items m-30 p-30"
         data-val="{if $user.bank_name && $user.bank_open && $user.bank_account_name && $user.bank_number}银行卡{/if}"
         lay-change="mode">
        <div class="middle flex items-start ">
            <img src="/static/index/images/payment/bank.png" alt="" class="icon">
            <span>银行卡</span>
        </div>
        <div class="desc">银行：{$user.bank_name?:'未绑定'}</div>
        <div class="desc">姓名：{$user.bank_account_name?:'未绑定'}</div>
        <div class="desc tran">账户：{$user.bank_number?:'未绑定'}</div>
        <img src="/static/index/images/not-check.png" alt="" class="check">
    </div>
</div>

<div class="btn theme-btn fixed-btn" lay-url="{:url('user/methodList')}" lay-event="jump">管理收款方式</div>
</body>
{include file="public/footer"/}
<script>
    layui.use(['methods'], function () {
        var m = layui.methods, a = layui.jquery, ly = layui.layer;
        m.event.change('mode', function (data, that) {
            if (!data.val) {
                ly.msg('请完善后在使用');
                return false;
            }
            a('.check').attr('src', '/static/index/images/not-check.png');
            a(that).find('.check').attr('src', '/static/index/images/check.png');
            parent.layui.drawModeCallback({
                val: data.val,
                icon: a(that).find('.icon').attr('src'),
                text: a(that).find('.tran').text(),
            });
        });
    });
</script>

</html>